<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GoldenLayout- a multi-window javascript layout manager for webapps</title>
	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML5, JavaScript, Layout Manager, webapp" />
	<meta name="description" content="GoldenLayout- a multi-window javascript layout manager for webapps" />
	<meta name="author" content="Wolfram Hempel" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="../assets/css/screen.css" />
	
	<link rel="stylesheet" type="text/css" href="../assets/css/api.css" />
	<link rel="stylesheet" type="text/css" href="../assets/css/syntaxhighlighter.css" />
	
	<script type="text/javascript">
	document.createElement( 'header' );
	document.createElement( 'nav' );
	</script>
	<script type="text/javascript" src="../assets/js/jquery.js"></script>
</head>
<body class="category_docs">
	<div id="modal" class="loading">
		<div class="background"></div>
		<div class="content-wrapper">
			<div class="head">
				<div class="close"></div>
				<span class="title"></span>
			</div>
			<div class="content"></div>
		</div>
	</div>
	
	<div id="outerWrapper">
		

		
		<div id="nav" class="standalone">
			<div class="start-bg"></div>
			<ul>
				<li ><a href="..">Start</a></li>
				<li ><a href="../download">Download</a></li>
				<li ><a href="../examples">Demos</a></li>
				<li ><a href="../tutorials">Tutorials</a></li>
				<li class="active"><a href="../docs">Docs</a></li>
				<li ><a href="../faq">Faq</a></li>
			</ul>
			<iframe src="https://ghbtns.com/github-btn.html?user=deepstreamIO&repo=golden-layout&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

		</div>
		
		<div id="wrapper" class="main">
			<ul id="subnav">
	<li class="head first">Configuration</li>
	<li >
		<a href="Config.html">Layout Config</a>
		<div class="isActiveIndicator orangeGradient"></div>
	</li>
	<li >
		<a href="ItemConfig.html">Item Config</a>
		<div class="isActiveIndicator orangeGradient"></div>
	</li>

	<li class="head">API</li>
	<li >
		<a href="GoldenLayout.html">GoldenLayout</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li class="active">
		<a href="Item.html">ContentItem</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
			<ul class="overview">
				
				<li><a href="#Properties">Properties</a></li>
				
				<li><a href="#Events">Events</a></li>
				
				<li><a href="#addChild( itemOrItemConfig, index )">addChild( itemOrItemConfig, index )</a></li>
				
				<li><a href="#removeChild( contentItem, keepChild )">removeChild( contentItem, keepChild )</a></li>
				
				<li><a href="#replaceChild( oldChild, newChild )">replaceChild( oldChild, newChild )</a></li>
				
				<li><a href="#setSize()">setSize()</a></li>
				
				<li><a href="#setTitle( title )">setTitle( title )</a></li>
				
				<li><a href="#callDownwards(functionName, functionArguments, bottomUp, skipSelf)">callDownwards(functionName, functionArguments, bottomUp, skipSelf)</a></li>
				
				<li><a href="#emitBubblingEvent( name )">emitBubblingEvent( name )</a></li>
				
				<li><a href="#remove()">remove()</a></li>
				
				<li><a href="#popout()">popout()</a></li>
				
				<li><a href="#toggleMaximise()">toggleMaximise()</a></li>
				
				<li><a href="#select()">select()</a></li>
				
				<li><a href="#deselect()">deselect()</a></li>
				
				<li><a href="#hasId(id)">hasId(id)</a></li>
				
				<li><a href="#setActiveContentItem( contentItem )">setActiveContentItem( contentItem )</a></li>
				
				<li><a href="#getActiveContentItem()">getActiveContentItem()</a></li>
				
				<li><a href="#addId(id)">addId(id)</a></li>
				
				<li><a href="#removeId(id)">removeId(id)</a></li>
				
				<li><a href="#getItemsByFilter(filterFunction)">getItemsByFilter(filterFunction)</a></li>
				
				<li><a href="#getItemsById( id )">getItemsById( id )</a></li>
				
				<li><a href="#getItemsByType( type )">getItemsByType( type )</a></li>
				
				<li><a href="#getComponentsByName( componentName )">getComponentsByName( componentName )</a></li>
				
			</ul>
		
	</li>
	<li >
		<a href="Container.html">Container</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li >
		<a href="BrowserWindow.html">BrowserWindow</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li >
		<a href="Header.html">Header</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li >
		<a href="Tab.html">Tab</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
	<li >
		<a href="EventEmitter.html">EventEmitter</a>
		<div class="isActiveIndicator orangeGradient"></div>
		
	</li>
</ul>
			<div id="content">
				<div class="section"><h2><a name="Properties">Properties</a></h2><h3>config</h3><p>This items configuration in its current state</p><h3>type</h3><p>The type of the item. Can be <code>row</code>, <code>column</code>, <code>stack</code>, <code>component</code> or <code>root</code></p><h3>contentItems</h3><p>An array of items that are children of this item</p><h3>parent</h3><p>The item that is this item&#39;s parent (or null if the item is root)</p><h3>id</h3><p>A String or array of identifiers if provided in the configuration</p><h3>isInitialised</h3><p>True if the item had been initialised</p><h3>isMaximised</h3><p>True if the item is maximised</p><h3>isRoot</h3><p>True if the item is the layout&#39;s root item</p><h3>isRow</h3><p>True if the item is a row</p><h3>isColumn</h3><p>True if the item is a column</p><h3>isStack</h3><p>True if the item is a stack</p><h3>isComponent</h3><p>True if the item is a component</p><h3>layoutManager</h3><p>A reference to the layoutManager that controls this item</p><h3>element</h3><p>The item&#39;s outer element</p><h3>childElementContainer</h3><p>The item&#39;s inner element. Can be the same as the outer element.</p></div><div class="section"><h2><a name="Events">Events</a></h2><h3>stateChanged</h3><p>Fired whenever something happened to this item or its children that changes the state of the layout (as returned by <code>layout.toConfig</code>)</p><h3>titleChanged</h3><p>Updated whenever the item&#39;s title changes as a result of calling <code>setTitle()</code> on either the item or from a container</p><h3>activeContentItemChanged <contentItem></h3><p>Fired whenever a different item is selected from a Stack</p><h3>itemDestroyed <Bubbling Event></h3><p>Fired whenever this item or one of its children gets destroyed</p><h3>itemCreated <Bubbling Event></h3><p>Fired whenever an item gets created as child of this item</p><h3>componentCreated <Bubbling Event></h3><p>Fired whenever a component gets created as child of this item</p><h3>rowCreated <Bubbling Event></h3><p>Fired whenever a row gets created as child of this item</p><h3>columnCreated <Bubbling Event></h3><p>Fired whenever a column gets created as child of this item</p><h3>stackCreated <Bubbling Event></h3><p>Fired whenever a stack gets created as child of this item</p></div><div class="section"><h2><a name="addChild( itemOrItemConfig, index )">addChild( itemOrItemConfig, index )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">itemOrItemConfig</td><td class="type">ContentItem or Configuration</td><td class="optional">false</td><td class="default">-</td><td class="description">A content item (or tree of content items) or an ItemConfiguration to create the item from</td></tr><tr><td class="argument">index</td><td class="type">Number</td><td class="optional">true</td><td class="default">last index</td><td class="description">An optional index that determines at which position the new item should be added.</td></tr></tbody></table><p>Adds an item as a child to this item. If the item is already a part of a layout it will be removed from
its original position before adding it to this item.</p></div><div class="section"><h2><a name="removeChild( contentItem, keepChild )">removeChild( contentItem, keepChild )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">contentItem</td><td class="type">ContentItem</td><td class="optional">false</td><td class="default">-</td><td class="description">The contentItem that should be removed</td></tr><tr><td class="argument">keepChild</td><td class="type">Boolean</td><td class="optional">true</td><td class="default">false</td><td class="description">If true the item won&#39;t be destroyed. (Use cautiosly, if the item isn&#39;t destroyed it&#39;s up to you to destroy it later)</td></tr></tbody></table><p>Destroys the item and all it&#39;s children.</p></div><div class="section"><h2><a name="replaceChild( oldChild, newChild )">replaceChild( oldChild, newChild )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">oldChild</td><td class="type">ContentItem</td><td class="optional">false</td><td class="default">-</td><td class="description">The contentItem that should be removed</td></tr><tr><td class="argument">newChild</td><td class="type">ContentItem or Configuration</td><td class="optional">false</td><td class="default">-</td><td class="description">A content item (or tree of content items) or an ItemConfiguration to create the item from</td></tr></tbody></table><p>Replaces oldChild with newChild</p></div><div class="section"><h2><a name="setSize()">setSize()</a></h2><p>Updates the items size. To actually assign a new size from within a component, use <code>container.setSize( width, height )</code></p></div><div class="section"><h2><a name="setTitle( title )">setTitle( title )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">title</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">the new title</td></tr></tbody></table><p>Sets the item&#39;s title to the provided value. Triggers <code>titleChanged</code> and <code>stateChanged</code> events</p></div><div class="section"><h2><a name="callDownwards(functionName, functionArguments, bottomUp, skipSelf)">callDownwards(functionName, functionArguments, bottomUp, skipSelf)</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">functionName</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">The name of the method to invoke</td></tr><tr><td class="argument">functionArguments</td><td class="type">Array</td><td class="optional">true</td><td class="default">-</td><td class="description">An array of arguments to pass to every function</td></tr><tr><td class="argument">bottomUp</td><td class="type">Boolean</td><td class="optional">true</td><td class="default">false</td><td class="description">If true, the method is invoked on the lowest parts of the tree first and then bubbles upwards</td></tr><tr><td class="argument">skipSelf</td><td class="type">Boolean</td><td class="optional">true</td><td class="default">false</td><td class="description">If true, the method will only be invoked on the item&#39;s children, but not on the item itself</td></tr></tbody></table><p>A powerful, yet admittedly confusing method to recursively call methods on items in a tree. Usually you wouldn&#39;t need to use it directly, but it&#39;s used internally to setSizes, destroy parts of the item tree etc.</p></div><div class="section"><h2><a name="emitBubblingEvent( name )">emitBubblingEvent( name )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">title</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">the name of the event</td></tr></tbody></table><p>Emits an event that bubbles up the item tree until it reaches the root element (and after a delay the layout manager). Useful e.g. for indicating state changes.</p></div><div class="section"><h2><a name="remove()">remove()</a></h2><p>Convenience method for <code>item.parent.removeChild( item )</code></p></div><div class="section"><h2><a name="popout()">popout()</a></h2><p>Removes the item from its current position in the layout and opens it in a window</p></div><div class="section"><h2><a name="toggleMaximise()">toggleMaximise()</a></h2><p>Maximises the item or minimises it if it&#39;s already maximised</p></div><div class="section"><h2><a name="select()">select()</a></h2><p>Selects the item. Only relevant if <code>settings.selectionEnabled</code> is set to true</p></div><div class="section"><h2><a name="deselect()">deselect()</a></h2><p>Unselects the item. Only relevant if <code>settings.selectionEnabled</code> is set to true</p></div><div class="section"><h2><a name="hasId(id)">hasId(id)</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">id</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">An id to check for</td></tr></tbody></table><p>Returns true if the item has the specified id or false if not</p></div><div class="section"><h2><a name="setActiveContentItem( contentItem )">setActiveContentItem( contentItem )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">contentItem</td><td class="type">GoldenLayout item</td><td class="optional">false</td><td class="default">-</td><td class="description">The new active content item</td></tr></tbody></table><p>Only Stacks have this method! It&#39;s the programmatical equivalent of clicking a tab.</p></div><div class="section"><h2><a name="getActiveContentItem()">getActiveContentItem()</a></h2><p>Only Stacks have this method! Returns the currently selected contentItem.</p></div><div class="section"><h2><a name="addId(id)">addId(id)</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">id</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">The id to be added</td></tr></tbody></table><p>Adds an id to an item or does nothing if the id is already present</p></div><div class="section"><h2><a name="removeId(id)">removeId(id)</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">id</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">The id to be removed</td></tr></tbody></table><p>Removes an id from an item or throws an error if the id couldn&#39;t be found</p></div><div class="section"><h2><a name="getItemsByFilter(filterFunction)">getItemsByFilter(filterFunction)</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">filterFunction</td><td class="type">Function</td><td class="optional">false</td><td class="default">-</td><td class="description">A function that determines whether an item matches certain criteria</td></tr></tbody></table><p>Calls filterFunction recursively for every item in the tree. If the function returns true the item
is added to the resulting array</p></div><div class="section"><h2><a name="getItemsById( id )">getItemsById( id )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">id</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">An id specified in the itemConfig</td></tr></tbody></table><p>Returns all items with the specified id.</p></div><div class="section"><h2><a name="getItemsByType( type )">getItemsByType( type )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">type</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">&#39;row&#39;, &#39;column&#39;, &#39;stack&#39;, &#39;component&#39; or &#39;root&#39;</td></tr></tbody></table><p>Returns all items with the specified type</p></div><div class="section"><h2><a name="getComponentsByName( componentName )">getComponentsByName( componentName )</a></h2><table class="args"><thead><tr><th>argument</th><th>type</th><th>optional</th><th>default</th><th>description</th></tr></thead><tbody><tr><td class="argument">type</td><td class="type">String</td><td class="optional">false</td><td class="default">-</td><td class="description">a componentName as specified in the itemConfig</td></tr></tbody></table><p>Returns all instances of the component with the specified componentName</p><p></div></p>
				
				<h3>Comments and Questions</h3>
				<div id="disqusContainer">
					<div id="disqus_thread"></div>
				    <script type="text/javascript">
				        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
				        var disqus_shortname = 'goldenlayoutcom'; // required: replace example with your forum shortname

				        /* * * DON'T EDIT BELOW THIS LINE * * */
				        (function() {
				            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
				            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
				            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
				        })();
				    </script>
				    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
				    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
			    
					
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../assets/js/docs.js"></script>
		
		<div id="footerPush"></div>
	</div>
	<div id="footer">
		<div class="footer-content">
			<div class="copyright">&copy;<span class="year"></span> deepstreamHub GmbH</div>
			<script type="text/javascript">
			$('.year').html( (new Date()).getFullYear() );
			</script>
			<ul class="footerItems">
				<li>
					<a href="https://github.com/deepstreamIO/golden-layout">Github</a>
					<a href="https://www.npmjs.com/package/golden-layout">NPM</a>
					<div>bower/npm: <code>'golden-layout'</code></div>
				</li>
				<li>
					<div>deepstreamHub GmbH</div>
					<div>Lindenstrasse 20-25</div>
					<div>10969 Berlin</div>
				</li>
				<li>
					<a href="mailto:info@deepstreamhub.com">info@deepstreamhub.com</a>
					<a href="https://deepstreamhub.com/">deepstreamHub.com</a><br />
					<a href="https://twitter.com/wolframhempel">by @wolframhempel</a>

				</li>
			</ul>
		</div>
	</div>

	<script type="text/javascript" src="../assets/js/Modal.js"></script>
	
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-63583386-5', 'auto');
	  ga('send', 'pageview');

	</script>
	
</body>
</html>